<template>
  <div>
    <!--面包屑功能-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>进货管理</el-breadcrumb-item>
      <el-breadcrumb-item>进货列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getInProductList">
            <el-button slot="append" icon="el-icon-search" @click="getInProductList()"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!--表格区-->
      <el-table :data="proInList" :border="true" stripe style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <!--获取查询出详细表 集合设置给里面的表格，-->
            <el-table :data="props.row.ProInfoList" stripe style="width: 90%" border  class="inlinetable">
              <el-table-column prop="GoodProName" label="货品名" width="180"> </el-table-column>
              <el-table-column prop="GoodAttr" label="参数" width="180"> </el-table-column>
              <el-table-column prop="ProJG" label="进价" width="80"> </el-table-column>
              <el-table-column prop="ProPTJG" label="摊后进价" width="80"> </el-table-column>
              <el-table-column prop="ProSL" label="数量" width="80"> </el-table-column>
              <el-table-column prop="XJ" label="小计" width="80"> </el-table-column>
              <el-table-column prop="BZ" label="备注"> </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="Id" label="编号" width="80"> </el-table-column>
        <el-table-column prop="GoodName" label="商品名" width="240"> </el-table-column>
        <el-table-column prop="InProBh" label="订单来源" width="200"> </el-table-column>
        <el-table-column prop="InProZDBH" label="单据编号" width="280"> </el-table-column>
        <el-table-column prop="ProJJSL" label="总数量" width="80"> </el-table-column>
        <el-table-column prop="ProJJZG" label="总价" width="80"> </el-table-column>
        <el-table-column prop="JHQTFY" label="其他费用" width="80"> </el-table-column>
        <el-table-column prop="JHRQ" label="日期" width="160"> </el-table-column>
        <el-table-column prop="bz" label="备注"> </el-table-column>
      </el-table>
      <!--分页区-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 10, 20, 50, 100, 200]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        query: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 5,
      },
      // 订单数据列表
      proInList: [],
      total: 0, // 总记录数
    }
  },
  methods: {
    async getInProductList() {
      const { data: res } = await this.$http.get('InProduct', { params: this.queryInfo })
      console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.warning('获取订单数据失败')
      }
      this.proInList = res.data.prolist
      this.total = res.data.total
    },
    // 分页每页 条数改变事件
    handleSizeChange(val) {
      this.queryInfo.pagesize = val
      this.getInProductList()
    },
    handleCurrentChange(val) {
      this.queryInfo.pagenum = val
      this.getInProductList()
    },
  },
  mounted() {},
  created() {
    this.getInProductList()
  },
}
</script>

<style lang="less" scoped>
    .inlinetable{
        margin-left:10px;
        border-radius: 20px;
        border: 1px solid #409EFF;

    }
</style>
